<script setup lang="ts">
import { useMemberStore } from '@/stores'
import { ref } from 'vue'

const emit = defineEmits<{
  (event: 'open'): void
}>()
const memberStore = useMemberStore()
</script>

<template>
  <view class="loginAvatarName" v-if="memberStore.token">
    <image
      class="userImage"
      :src="memberStore.userInfo?.headImg || `/static/images/logo.png`"
      mode="aspectFit"
    />
    <image class="userImageCoin" src="/static/images/my/coin.png" mode="aspectFit" />
    <navigator hover-class="none" url="/pagesMy/setUserInfo/setUserInfo" class="userName">
      <text class="_text">{{ memberStore.userInfo?.nickName }}</text>
      <view class="goEdit">
        编辑个人信息&nbsp;<uni-icons type="forward" color="#00000080" size="13"> </uni-icons>
      </view>
    </navigator>
  </view>
  <view class="userAvatarName" v-else>
    <image class="userImage" src="/static/images/logo.png" mode="aspectFit" />
    <view class="userName">
      <image class="defaultName" src="/static/images/logo_text.png" mode="scaleToFill" />
      <text class="_text">登录立享更多优惠权益</text>
    </view>
    <button class="login" @tap="$emit('open')">立即登录</button>
  </view>
</template>

<style lang="scss">
.userAvatarName {
  display: flex;
  .userImage {
    width: 116rpx;
    height: 116rpx;
    margin: 188rpx 0 0 40rpx;
    background-color: #fff;
    border-radius: 50%;
  }
  .userName {
    display: flex;
    flex-direction: column;
    margin: 204rpx 0 0 22rpx;
    .defaultName {
      width: 128rpx;
      height: 40rpx;
      // background-color: red;
    }
    ._text {
      // width: 176rpx;
      color: #00000080;
      margin-top: 10rpx;
      height: 30rpx;
      font-size: 22rpx;
    }
  }
  .login {
    width: 160rpx;
    height: 56rpx;
    line-height: 56rpx;
    align-items: center;
    margin-top: 218rpx;
    margin-right: 40rpx;
    font-size: 24rpx;
    border-radius: 32rpx;
    background-color: $uni-color-motif;
    color: #fff;
  }
}
.loginAvatarName {
  display: flex;
  position: relative;
  .userImage {
    width: 120rpx;
    height: 120rpx;
    margin: 188rpx 0 0 40rpx;
    background-color: #fff;
    border-radius: 50%;
  }
  .userImageCoin {
    position: absolute;
    top: 270rpx;
    left: 120rpx;
    width: 36rpx;
    height: 44rpx;
  }
  .userName {
    display: flex;
    flex-direction: column;
    margin: 204rpx 0 0 22rpx;
    font-size: 32rpx;
    color: #111;
    .goEdit {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #333;
    }
  }
}
</style>
